<!--assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径，将有webpack解析为模块依赖
　static：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用：/static[filename]
　根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件-->
<template>
  <div class="leaguesContent">
  <div class="leaguesTabPane">
    <div class="leaguesTab" v-for="(league,index) in leagues" :key="index"  @click="tab(index)">
      <img :src="getImgUrl(league.ico)">
      <!-- 着重理解v-bind:class是接受了一个对象，'active'是类名，第二个参数可以是一个表达式或者一个数据属性为boolean类型的值，如果为true则绑定class -->
      <span class="tabSpan" :class="{active:num==index}">
        ●&nbsp;&nbsp;&nbsp;{{league.name}}
      </span>
    </div>
  </div>
  <div id="teamInfo"><!-- 必须写div 否则 dl元素成为顶层元素 无法渲染 -->
    <dl class="leagues" v-for="(league,index) in leagues" :key="index" v-show="num==index">
      <dd v-for="(team,teamIndex) in league.teams" :key="teamIndex">
        <a :href="'/#/teamInfo?teamId='+team.teamId">
        <div class="team">
          <div>
            <img :src="getImgUrl(team.pic)">
          </div>
          <div>{{team.name}}</div>
        </div>
        </a>
      </dd>
    </dl>
  </div>
  </div>
</template>

<script>
  import api from '../../../axios/api.js'
  export default {
    name: 'team',
    data () {
      return {
        num:0,
        leagues:[]
      }
    },
    created() {//组件加载时候 调用
      this.setDataFromAxios();
    },
    methods:{
      getImgUrl:function(ico){
        return require("../../../static/images/league/"+ico);
      },
      setDataFromAxios: function() {
        api.setDataFromAxios('/team', null,'post')//自行封装的axios方法 post get参数需要与mock.js中 参数匹配
          .then(res => {
            console.log(res);
            this.leagues = res.leagues;
          });
      },
      tab:function(index) {
        this.num = index;
      }
    }
  }
</script>

<style lang="stylus">
  .tabSpan
   color #042122
   font-family "微软雅黑"
   font-size 20px
   font-weight 300;
   display block;
   width 80px
   height 80px
   line-height 80px
   position absolute
   right 20px
  .active
   color  coral
  .leaguesContent
    width 1280px
    margin 0 auto
   .leaguesTabPane
     width 1280px
     height 80px
     .leaguesTab
       width 180px
       height 80px
       float:left
       position relative
       padding 0 10px
       margin-left 10px
       img
         width 80px
         height 80px
         position absolute
         left 10px;
    .league
      width 1280px
      text-align left
      height 80px
      line-height 80px
      position relative


  #teamInfo
    margin 0 auto
    width 1280px

  .leagues
    width 1280px
    height auto
    &:after
      content ''
      display block
      clear both




  dd
    margin 0px
  .team
    float left
    width 213px
    height 180px

    img
      width 100px
      height 100px

    div
      font-size 20px
      padding-top 20px
</style>
